<template>
  <div>
    <div class="create-role">
      <el-button type="primary" v-auth="'ROLE_ADD'" @click="createRole">添加</el-button>
    </div>
    <el-table
      :data="roleList"
      border
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称"
        align="center"
        width="200">
      </el-table-column>
      <el-table-column
        prop="description"
        label="角色描述"
        align="center">
      </el-table-column>
      <!-- <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        width="200">
      </el-table-column> -->
      <el-table-column
        label="操作"
        align="center"
        width="260">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            class="role-item-edit"
            v-auth="'ROLE_EDIT'"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="text"
            v-auth="'ROLE_DEL'"
            class="role-item-del"
            @click="handleDel(scope.$index, scope.row)">删除</el-button>
          <el-button
            size="mini"
            type="text"
            v-auth="'ROLE_AUTH'"
            class="role-item-auth"
            @click="handleAuth(scope.$index, scope.row)">权限</el-button>
        </template>
      </el-table-column>
    </el-table>
    <MyPage
      :pageSize="pageSize"
      :pageSizes="pageSizes"
      :currentPage="currentPage"
      :total="total"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
    />
    <MessageBox @confirm="confirm" ref="msgBox"/>
    <AuthDialog ref="authDialog"
      @updateMenuId="updateCurrentRole"
      :authTree="treeData"
      :checkedKeys="checkedKeys"/>
  </div>
</template>


<script>
import MessageBox from './components/messageBox'
import MyPage from '@/components/myPage'
import AuthDialog from './components/authDialog'
import util from '@/common/util'
export default {
  data () {
    return {
      roleList: [],
      pageSize: 10,
      pageSizes: [5, 10, 20, 50, 100],
      total: 0,
      currentPage: 1,
      // 控制dialog的显示
      visible: true,
      treeData: [],
      checkedKeys: [],
      // 当前角色数据
      current: {}
    }
  },
  created () {
    this.listRoles()
    this.getMenu()
  },
  methods: {
    listRoles () {
      this.myGet('/uc/role', {page: this.currentPage, size: this.pageSize}).then(data => {
        this.roleList = data.content.map(item => {
          return {
            id: item.id,
            roleName: item.roleName,
            description: item.description,
            createTime: util.formatTime(new Date(item.gmtCreate)),
            menuIds: item.menuIds
          }
        })
        this.total = data.totalElements
      }).catch(e => this.$message.error(e.message))
    },
    getMenu () {
      this.myGet('/uc/role/menu').then(data => {
        this.treeData = this.transMenuData(data)
      }).catch(e => this.$message.error(e.message))
    },
    updateCurrentRole (menuIds) {
      this.myPut('/uc/role', {...this.current, menuIds}).then(() => {
        this.listRoles()
        this.$refs.authDialog.hideAuthDialog()
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      }).catch(e => this.$message.error(e.message))
    },
    transMenuData (data) {
      if (!data) return
      if (Array.isArray(data)) {
        return data.map(node => {
          return {
            ...node,
            label: node.menuName,
            children: this.transMenuData(node.children)
          }
        })
      }
    },
    handleEdit (i, data) {
      this.current = data
      this.$refs.msgBox.editRole(data.id, data.roleName, data.description)
    },
    handleDel (i, data) {
      this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => this.myPut('/uc/role', {...data, status: -1}))
        .then(data => this.listRoles())
        .catch(e => {
          if (e === 'cancel') return
          this.$message.error(e.message)
        })
    },
    handleAuth (i, data) {
      this.current = data
      this.checkedKeys = data.menuIds || []
      this.$refs.authDialog.showAuthDialog()
    },
    confirm (data) {
      if (data.id) {
        // 修改角色
        this.myPut('/uc/role', {...this.current, ...data}).then(data => this.listRoles()).catch(e => this.$message.error(e.message))
      } else {
        // 创建角色
        this.myPost('/uc/role', data).then(data => this.listRoles()).catch(e => this.$message.error(e.message))
      }
    },
    createRole () {
      this.$refs.msgBox.createRole()
    },
    sizeChange (data) {
      this.pageSize = data
      this.listRoles()
    },
    currentChange (current) {
      this.currentPage = current
      this.listRoles()
    }
  },
  components: {
    MessageBox,
    MyPage,
    AuthDialog
  }
}
</script>


<style scoped>
.create-role {
  padding: 20px 0;
}
.role-item-edit {
  color: #00cc00;
}
.role-item-del {
  color: #ff0000;
  margin-left: 30px;
}
.role-item-auth {
  color: #ffcc00;
  margin-left: 30px;
}
</style>
